<template>
<div class="message-body">
  <div class="center">
    <div class="item" v-for="(index) in 30" :key="index">
      <div class="images">
        <img src="../../static/image/aa.jpg">
      </div>
      <div class="texts">
        <span>系统消息</span>
        <span>04-30</span>
        <span>亲爱的用户：回复奥斯降低哦请问农夫还哦少平手机拍的</span>
      </div>
    </div>
  </div>
</div>
</template>

<script>
export default {
name: "Message"
}
</script>

<style scoped>
   .message-body{
     position: absolute;
     top: 41px;
     width: 90%;


   }
   .message-body .center .item img{
     border-radius: 50%;
     height: 50px;
     width: 50px;
   }
   .message-body .center .item{
     height:60px;
     width: 100%;
     border-bottom:1px solid #d6d6d6;
     margin-top: 10px;
     margin-bottom: 10px;
   }
   .message-body .center .item .images{
     display:inline;
     width: 50px;
     height: 50px;

   }
   .message-body .center .item .texts{
     display:inline;
     width: 50px;
     height: 50px;
   }
   .message-body .center .item span:nth-child(1){
     position: absolute;
     margin: 0;
     font-size: 15px;
     font-weight: bold;
     color: black;
   }
   .message-body .center .item span:nth-child(2){
     position: absolute;
     right: 10px;
   }
   .message-body .center .item span:nth-child(3){
     display:inline-block;
     font-size: 10px;
     color: #c3c3c3;
     width: 50px;
     height: 16px;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
   }

</style>